<!-- 预约列表 -->
<template>
  <div class="apply-record-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form 
          :model="dg.ps" 
          :inline="true" 
          @keyup.enter.native="getDgList">
          <el-form-item>
            <el-date-picker
              v-model="dg.ps.sedate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 205px"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-select 
              :placeholder="'预约类型'" 
              v-model="dg.ps.applyType"
              multiple collapse-tags
              style="width: 130px">
              <el-option :label="'报停'" :value="'DESTORY'"></el-option>
              <el-option :label="'下线'" :value="'DOWN'"></el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item>
            <el-input
              style="width: 120px"
              placeholder="车牌号"
              clearable
              v-model="dg.ps.plateNum">
            </el-input>
          </el-form-item> -->

          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList">
            搜索
          </el-button>

          <el-button 
            type="primary" 
            icon="el-icon-close"
            @click="cancelApply">
            取消预约
          </el-button>
        </el-form>
      </div>

      <!-- <TableSelfSet 
        v-if="dg.columns.length > 0" 
        :tbTitle="'预约记录列表'" 
        :dgName="dg.dgName" 
        :tbId="dg.tbName" 
        :srcCols="dg.srcCols" 
        :columns="dg.columns" 
        @saveSet="saveTbSet"/> -->
    </div>
    
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight - 60"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="selection" 
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'applyStime'">
            {{row.applyStime | time('yyyy年MM月dd号 HH:mm')}}
          </template>

          <span v-else-if="col.field == 'applyStatus'">
            <span v-if="row.applyStatus == 1" class="c-bbb">已取消</span>
            <span v-if="row.applyStatus == 0" class="c-green">正常</span>
          </span>

          <span v-else-if="col.field == 'repairCompany'">
            {{row.customId && row.customId.baseUserId.realName}}
          </span>

          <span v-else-if="col.field == 'linkPhone'">
            {{row.customId && row.customId.baseUserId.phone}}
          </span>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination 
      v-show="dg.total >= 0" 
      :total="dg.total" 
      :page.sync="dg.ps.page" 
      :limit.sync="dg.ps.rows" 
      @pagination="getDgList"
    />
  </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import TableSelfSet from '@/components/TableSelfSet';    
import Pagination from '@/components/Pagination';

import * as logisticsSer from "@/api/services/logistics.service";

export default {
  mixins: [ DataGridBase, DataGridResize],
  components: { TableSelfSet, Pagination },
  props: {myData: Object},
  data() { 
    let cols = [
      {label: '预约时间', field: 'applyStime', width: 140},
      {label: '预约状态', field: 'applyStatus', width: 150},
      {label: '预约修理厂', field: 'repairCompany', width: 150},
      {label: '预约地址', field: 'applyAddress', width: 'auto'},
      {label: '联系电话', field: 'linkPhone', width: 100},
      {label: '备注(内容)', field: 'note', width: 'auto'},
    ];
    return {
      dg: {
        dgName: 'dg',
        tbName: 'applyRecordListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1, rows: 20,
          // 查询类型：0预约记录 1维修记录
          searchType: 0,
          // 预约类型，多个逗号拼接：当searchType为0时，一定传值：报停(DESTORY) 下线(DOWN)
          applyType: ["DESTORY", "DOWN"],
          // 车牌号 
          plateNum: this.myData.obj.plateNum,
          // 维修类型id eg:1
          // repairTypeId: '',
          // 起止日期
          sedate: [],
        },
      },

    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods:{
    // 获取-表格列表
    getDgList(){
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
      
      ps.stime = (ps.sedate && ps.sedate.length == 2) ? ps.sedate[0] : '';
      ps.etime = (ps.sedate && ps.sedate.length == 2) ? ps.sedate[1] : '';
      delete ps.sedate;

      ps.applyType = (ps.applyType && ps.applyType.length > 0) ? ps.applyType.join(',') : '';

      logisticsSer.applyRepairDowns(ps).then(res => {
        if(res.code == 1){
          let list = res.data;
          for(let i in list){ list[i].dgName = dg.dgName; }
      
          dg.list = list;
          dg.total = res.count;
        }else{
          dg.list = [];
          dg.total = 0;
        }
      });
    },

    // 取消预约
    cancelApply(){
      const that = this, U = that.U, rows = that.getSeledRows();

      if(rows.length !== 1){
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      }else{
        let row = rows[0];
        U.qconfim(`确认取消预约吗？`).then(r => {
          if(r){
            logisticsSer.cancelApplyRepair({applyId: row.id }).then(res => {
              if(res.code !== 1){
                U.qerror(res.msg);
              }else{
                U.qsuccess(res.msg);

                // 刷新列表
                that.getDgList();
              }
            });
          }
        });
      }
    },

  },
 }
</script>